import React, {
  Component
} from 'react';
import {
  connect
} from 'react-redux';
import {
  meLadder,
  ladder
} from '../../redux/login.redux'

@connect(
  state => state.hitTheList, {
    meLadder,
    ladder
  }
)
class RankingList extends Component {
  componentDidMount() {
    this.props.meLadder(this.props.user)
    this.props.ladder({})
  }

  goInvita() {
    this.props.history.push('/poster')
  }

  render() {
    const meLadderData = this.props.meLadderData;
    return (
      <div className="ranking-warp">
        <div className="rankingList">
          <div className="ranking-body">
            <div className="list-title">
              我已经拉了{meLadderData.invite}人
            </div>
            <div className="ranking">排名：{meLadderData.rank}位</div>
            <div className="small-title">排名前30的兴迷，将获得张艺兴新作《一出好戏》北京首映礼门票一张，与张艺兴面对面交谈</div>
            <div className="auto-ranking">
              <div className="auto-box">
                <div className="auto-scroll">
                  {this.props.ladderData.map((v, i) => {
                    return (
                      <div className="item" key={i}>
                        <div className="flex1"><span>第{i + 1}名: </span>{v.name}</div>
                        <div className="text-right">{v.invite}人</div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>

            <div className="yq-box">
              <div className="btn-yq" onClick={() => this.goInvita()}></div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default RankingList